<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>Units</title> 
	<style>
		canvas{ position:absolute; }
		p{ position:absolute; bottom:0px; }
		.hide{ display:none; }
		
		._win{ position:absolute; top:100px; left:100px; z-index:1000; width:200px; height:200px; background:#777; }
	</style>
	<script src="../../lib/jquery/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> 
	<script> 
		$( function(){
			
			var img = new Image();
			img.src = "big.png";
			
			var w = h = 50;
			var n = 200; //100			
			var inter = 125;
			t = 48;
			
			var ct = $("#ct");
			var ctx = $("<canvas>").attr( {
						width	: t * w,
						height	: t * h
					} ).css( "zIndex", 1 ).appendTo( ct )[ 0 ].getContext("2d");
			var canvas = ctx.canvas;
			var count = 0;
			
/*
			canvas.width = t;
			canvas.height = t;
			
			ctx.drawImage( img, 0, 0, t, t, 0,0 ,t,t );
			
			var data = canvas.toDataURL();
			var img2 = new Image();
			img2.src = data;
			
			canvas.width = t * w;
			canvas.height = t * h;
*/
			
			setInterval( function(){
				
				ctx.clearRect( 0, 0, 800, 600 );
				
				for (var i=0; i< n; i++) {
					var x = (i % w) * t, y = parseInt(i/ w) * t;
					
					ctx.drawImage( img, 0, 0, t, t, x, y, t, t );
					//ctx.drawImage( img2, 0, 0, t, t, x, y, t, t );
				}
				
				
			}, inter );
		} );
		

		
		
			
	</script> 
</head> 
<body id="canvasdemo"> 
	<div id="ct">
		
	</div>
	<p>
		n=100 big cpu =15% <br/>
		n=100 small cpu =13% <br/>
		n=100 big cpu =18% <br/>
		n=200 small cpu =14% <br/>
		将整张图片切割为小图片更高效
	</p>	
</body> 
<script></script>
</html>